<template>
  <div>
    <section v-show="!showChange" class="c-pt120 c-flex-column c-flex-center c-ph40">
      <img class="c-ww188" :src="require('@/assets/i/wap/member/changeMobile.png')" alt="" />
      <div class="c-pt40 c-fs28 c-pb100 c-fw-b">您绑定的手机号：{{oldPhoneNumber}}</div>
      <div class="c-fc-white c-hh60 c-w100 c-fs26 c-flex-row c-flex-center c-textAlign-c c-br40 theme-bg" @click="showChange = true">更换手机号</div>
    </section>
    <section v-show="showChange" class="c-pt60 c-ph40 c-fs26">
      <div class="c-fs32 c-fw-b">更换绑定手机</div>
      <div class="c-pt20 c-fs22 c-fc-gray">一个手机号只能绑定一个账号</div>
      <div class="c-pt50 c-pb40 c-bd-b1-mgray c-flex-row c-aligni-center">
        <span class="c-ww170 c-bd-r1-d8 c-lh c-pl24">新手机号</span>
        <input type="tel" v-model.trim="mobile" placeholder="请输入手机号" maxlength="13" class="c-pl30 c-fs26 c-flex-grow1 c-w0 c-bd0" />
      </div>

      <div class="c-pt40 c-pb40 c-bd-b1-mgray c-flex-row c-aligni-center">
        <span class="c-ww170 c-bd-r1-d8 c-lh c-pl24">图形验证码</span>
        <input type="text" v-model="imgCode" @input="code=code.slice(0, 4)" placeholder="请输入图形验证码" maxlength="4" class="c-pl30 c-fs26 c-flex-grow1 c-w0 c-bd0 c-pr20 needsclick" />
        <div>
          <img :src="codeImgInfo.img" @click="getImgCode()" class="c-ww116" alt=""/>
        </div>
      </div>

      <div class="c-pt40 c-pb40 c-bd-b1-mgray c-flex-row c-aligni-center">
        <span class="c-ww170 c-bd-r1-d8 c-lh c-pl24">验证码</span>
        <input type="text" v-model="code" @input="code=code.slice(0, 4)" name="" placeholder="请输入验证码" maxlength="4" class="c-pl30 c-fs26 c-flex-grow1 c-w0 c-bd0 c-pr20 needsclick" />
        <span class="theme-fc c-textAlign-c" @click="showImgCode">{{codeText}}</span>
      </div>
      <div class="c-mt100 c-fc-white c-hh60 c-w100 c-fs26 c-flex-row c-flex-center c-textAlign-c c-br40" :class="(mobile && code) ? 'theme-bg':'c-bg-ccc'" @click="submit">确认</div>
    </section>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
let isClicking = false;
let codeTimeNum = 60;//验证码倒计时
export default {
  name: "ChangeMobile",
  props: [],
  components: {
  },
  beforeCreate() { },
  data() {
    return {
      showChange: false,
      theme: localStorage.getItem("colorName") || "mb5_default",
      companyName: window.localStorage.getItem("companyName"),
      companyId: window.localStorage.getItem("companyId"),
      oldPhoneNumber: localStorage.getItem("uMobile"),
      codeText: "获取验证码",
      mobile: null,
      code: null, // 验证码
      isAgree: 1, //ios app同意条款
      isiOS: false,
      isYz: true,
      codeImgInfo: '', //图形验证码信息
      imgCode: '', //填入的图形验证码
      interval: null,
      // isShowImgCode: false, //是否展示图形验证码
    };
  },
  created() {
    utilJs.appShare(this);
    this.getImgCode();
  },
  mounted() { },
  methods: {
    showImgCode() {
      if (!this.mobile) {
        this.$showCjToast({
          text: "手机号不能为空",
          type: "warn",
        });
        return;
      }
      if (!this.imgCode) {
        this.$showCjToast({
          text: "请先填写图形验证码",
          type: "warn",
        });
        return;
      }
      this.getYzcode();
      // this.imgCode = '';
      // this.getImgCode();
      // this.isShowImgCode = true;
    },
    getImgCode() {
      let $this = this;
      if ($this.isLoading == true) {
        return;
      }
      $this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}common/captcha`, res => {
        $this.codeImgInfo = res;
        $this.isLoading = false;
      }, failRes => {
        $this.isLoading = false;
      });
    },
    goInfo(index) {
      this.$routerGo(this, "push", { path: '/homePage/agent/agentInfo', query: { index: index } });
    },
    //验证码倒计时
    getYzMethod() {
      this.isYz = false;
      codeTimeNum -= 1;
      this.codeText = codeTimeNum + "秒后重新获取";
      if (codeTimeNum == 0) {
        clearInterval(this.interval);
        this.codeText = "获取验证码";
        this.isYz = true;
        codeTimeNum = 60;
      }
    },
    //点击获取验证码
    getYzcode() {
      if (!this.mobile) {
        this.$showCjToast({
          text: "手机号不能为空",
          type: "warn",
        });
        return;
      } else if (this.mobile == this.oldPhoneNumber) {
        this.$showCjToast({
          text: "新手机号和原手机号一致",
          type: "warn",
        });
        return;
      } else if (this.imgCode == '') {
        this.$showCjToast({
          text: "图片验证码不能为空",
          type: "warn",
        });
        return;
      }
      if (this.codeText != "获取验证码") {
        return;
      }
      if (isClicking) {
        return;
      }
      isClicking = true;
      let $this = this;
      // $this.codeText = "发送中";
      let postData = {
        mobile: this.mobile,
        isBindMobile: true,
        captcha: this.imgCode,
        captchaKey: this.codeImgInfo.key,
      }
      utilJs.postMethod(`${global.apiurl}members/sendCode`, postData, res => {
        isClicking = false;
        if (res.errMsg) {
          $this.codeText = "获取验证码";
          $this.isClick = false;
          $this.$showCjToast({
            text: res.errMsg,
            type: "warn",
          });
        } else {
          $this.interval = setInterval($this.getYzMethod, 1000);
        }
      },
      function () {
        clearInterval($this.interval);
        $this.codeText = "获取验证码";
        $this.isYz = true;
        $this.num = 60;
        isClicking = false;
      }
      )
    },
    //检测提交
    checkSubmit() {
      if (!this.mobile) {
        this.$showCjToast({
          text: "手机号不能为空",
          type: "warn",
        });
        return false;
      } else if (!this.code) {
        this.$showCjToast({
          text: "验证码不能为空",
          type: "warn",
        });
        return false;
      } else if (this.mobile == this.oldPhoneNumber) {
        this.$showCjToast({
          text: "新手机号和原手机号一致",
          type: "warn",
        });
        return false;
      } else {
        return true;
      }
    },
    submit() {
      if (this.isiOS && localStorage.getItem("companyId") == "ldwk") { //ldwk:百家青少年教育app
        if (this.isAgree == 0) {
          this.$showCjToast({
            text: "登陆注册同意用户协议",
            type: "warn",
          });
          return;
        }
      }
      if (!this.checkSubmit()) {
        return;
      }
      if (isClicking) {
        return;
      }
      let that = this;
      isClicking = true;
      let postData = {
        'mobile': this.mobile,
        'code': this.code,
      };
      utilJs.postMethod(`${global.apiurl}members/changeMobile`, postData, (res) => {
        isClicking = false;
        localStorage.setItem("uMobile", this.mobile);
        this.$showCjToast({
          text: "更换成功",
          type: "success",
        }).then(() => {
          that.$router.go(-1);
        });
      }, (failRes) => {
        isClicking = false;
      });
    },

    //分享
    wechatShare() {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare() {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    setDocumentTitle("更换手机号");// eslint-disable-line
    this.wechatShare();
    isClicking = false;
    codeTimeNum = 60;
    this.isAgree = 1;
    this.showChange = false;
    this.isYz = true;
    this.codeText = '获取验证码';
    this.mobile = '';
    this.code = '';
    this.codeImgInfo = '';
    this.imgCode = '';
    // this.isShowImgCode = false;
    this.oldPhoneNumber = localStorage.getItem("uMobile");
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
  },
  deactivated() {
    clearInterval(this.interval);
  }
};
</script>
